<template>
  <div id="buy04">
    <div class="input-warp">
      <div class="input-box">
        <input
          v-model.trim="code"
          type="text"
          @keydown.enter="exchange"
          placeholder="请输入您的兑换码"
          class="inp"
        />
        <button v-if="code.length" class="btn btn2" @click="exchange">立即兑换</button>
        <button v-else class="btn btn1">立即兑换</button>
      </div>
      <el-tooltip effect="light" placement="bottom-end" popper-class="mytooltip">
        <div slot="content">
          <!-- 兑换码一次只能使用一个； <br /> -->
          降级兑换会员：优先使用级别高的会员，过期后自动启用级别低的会员
          <br />升级兑换会员：优先兑换级别高的会员，暂停当前低级别会员，等高级别会员过期后自动开启低级别会员
        </div>
        <img class="icon" src="@/assets/meng/search_result04.png" alt />
      </el-tooltip>
    </div>

    <!-- 表格 -->
    <table class="table">
      <thead>
        <tr>
          <th>序号</th>
          <th>兑换码</th>
          <th>内容</th>
          <th>状态</th>
          <th>兑换时间</th>
          <th>失效时间</th>
        </tr>
      </thead>
      <tbody v-if="list.length && !loading">
        <tr v-for="item,index in list" :key="index">
          <td>{{10*(page-1)+index+1}}</td>
          <td>{{item.exchangeCodes}}</td>
          <td>{{item.content}}</td>
          <td>{{item.status}}</td>
          <td>{{item.exchangeTime}}</td>
          <td>{{item.vipEndTime}}</td>
        </tr>
      </tbody>
      <div class="zw" v-if="list.length==0 && !loading">
        <img src="@/assets/liu/zw.png" />
        <p>您没有任何兑换记录~</p>
      </div>
    </table>
    <!-- 分页 -->
    <div class="paginationBox pageBox">
      <el-pagination
        class="pageBox"
        background
        layout="prev, pager, next, jumper"
        :total="count"
        :page-size="size"
        :current-page="page"
        @current-change="currentChange"
        :hide-on-single-page="true"
      ></el-pagination>
    </div>
    <!--loading -->
    <div
      v-loading="loading"
      v-if="loading"
      class="loading"
      element-loading-text="拼命加载中..."
      element-loading-spinner="el-icon-loading"
    ></div>
  </div>
</template>
<script>
export default {
  name: 'buy04',
  components: {},
  data() {
    return {
      code: '',
      list: [],
      count: 0,
      page: 1,
      size: 10,
      loading: true
    };
  },
  computed: {},
  created() {
    this.tableData();
  },
  mounted() {},
  methods: {
    exchange() {
      if (!this.code.length) {
        return;
      }
      this.$axios
        .get('/api/ExchangeCode/ConfirmExchange?code=' + this.code)
        .then(result => {
          console.log(result.data);
          if (result.data.code == 0) {
            this.$message({
              message: '兑换码已生效！',
              type: 'success',
              duration: 3000,
              offset: '400',
              center: true,
              onClose() {
                location.href = '/talent_main/person_center';
              }
            });
          } else {
            this.$message({
              message: result.data.msg,
              center: true,
              duration: 3000,
              offset: 444,
              type: 'warning',
              center: true
            });
          }
        })
        .catch(err => {});
    },
    // 表格数据展示
    tableData() {
      this.$axios
        .get('/api/ExchangeCode/getexchangecode', {
          params: {
            page: this.page,
            size: this.size
          }
        })
        .then(result => {
          // console.log(result.data);
          if (result.data.code === 0) {
            this.list = result.data.data;
            this.count = result.data.count;
            this.list.forEach(item => {
              if (item.status == 0) {
                return (item.status = '生效中');
              } else if (item.status == 1) {
                return (item.status = '待生效');
              } else if (item.status == 2) {
                return (item.status = '已失效');
              }
            });
          }
          this.loading = false;
        });
    },
    currentChange(page) {
      this.list = [];
      this.page = page;
      this.tableData();
    }
  }
};
</script>
<style scoped lang='less'>
#buy04 {
  width: 100%;
  height: 100%;
  position: relative;
  box-sizing: border-box;
  // background-color: #fff;
  padding: 20px;
  padding-bottom: 0;
  // border-radius: 4px;
  .input-warp {
    width: 100%;
    display: flex;
    align-items: center;
    position: relative;
    margin-bottom: 20px;
    .input-box {
      width: 500px;
      height: 40px;
      display: flex;
      box-sizing: border-box;
      border: solid 2px #fd7f2c;
      border-radius: 4px;
      .inp {
        padding-left: 15px;
        width: 400px;
        height: 36px;
        color: #222;
        font-size: 14px;
        box-sizing: border-box;
        outline: none;
        border: 0;
      }
      .btn {
        width: 100px;
        height: 36px;
        background-color: #fd7f2c;
        font-size: 14px;
        color: #fff;
        box-sizing: border-box;
      }
    }
    .icon {
      width: 14px;
      height: 14px;
      margin-left: 16px;
    }
  }

  .table {
    text-align: center;
    font-size: 14px;
    tbody {
      tr {
        height: 60px;
      }
    }
    .zw {
      position: absolute;
      top: 288px;
    }
  }
  .paginationBox {
    .el-pagination {
      margin-top: 20px;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }
  }
}
</style>